section {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    text-align: center
}

input {
    display: none
}


/* css3 */

.css input[type='radio']+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #d7d7d7;
}

.css input[type='radio']:checked+label {
    border: 1px solid #d73e33;
    position: relative;
}

.css input[type='radio']:checked+label::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #d73e33;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.css input[type='checkbox']+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
}

.css input[type='checkbox']:checked+label {
    border: 1px solid #d73e33;
    position: relative;
}

.css input[type='checkbox']:checked+label::before {
    content: '';
    width: 6px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(-45deg);
    border-top: none;
    border-right: none;
    border-left: 2px solid #d73e33;
    border-bottom: 2px solid #d73e33
}


/* 雪碧图 */

.sprite input[type='radio']+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: url(1.png) no-repeat 0 0;
}

.sprite input[type='radio']:checked+label {
    background: url(1.png) no-repeat -35px 0px;
}

.sprite input[type='checkbox']+label {
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: url(1.png) no-repeat 0 -22px;
}

.sprite input[type='checkbox']:checked+label {
    background: url(1.png) no-repeat -35px -21px;
}